var dom, ctx, width, height, r;

var elements = document.getElementsByClassName('clock');
//console.log(elements.length);

var timer = setInterval(function(){
	for (var i = 0; i < elements.length; i++) {
		dom = elements[i];
		ctx = dom.getContext('2d');
		width = ctx.canvas.width;
		height = ctx.canvas.height;
		r = width / 2;
		draw(i);
	}
}, 1000);

function drawBackground() {
	ctx.save();
	ctx.translate(r, r);
	ctx.beginPath();

	ctx.arc(0, 0, r - 1, 2 * Math.PI, false);
	ctx.strokeStyle = '#405F9E'; //设置或返回用于笔触的颜色、渐变或模式。
	ctx.stroke();

	// var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
	// ctx.font = '18px Arial';
	// ctx.textAlign = 'center';
	// ctx.textBaseline = 'middle';
	// hourNumbers.forEach(function(number, i) {
	// 	var rad = 2 * Math.PI / 12 * i;
	// 	var x = Math.cos(rad) * (r - 16);
	// 	var y = Math.sin(rad) * (r - 16);
	// 	ctx.fillText(number, x, y);

	// });
	for (var i = 0; i < 60; i++) {
		var rad = 2 * Math.PI / 60 * i;
		var x = Math.cos(rad) * (r - 4);
		var y = Math.sin(rad) * (r - 4);
		ctx.beginPath();
		if (i % 5 === 0) {
			ctx.strokeStyle = "#fff";
			ctx.lineCap = 'round';
			if(i % 3 === 0){
				ctx.lineWidth = 3;
				ctx.moveTo(55,0);
			}else{
				ctx.lineWidth = 2;
				ctx.moveTo(60,0);
			}
			ctx.lineTo(70,0);
			ctx.stroke();
			ctx.rotate(Math.PI/6);
			ctx.closePath();
			// ctx.arc(x, y, 2, 0, 2 * Math.PI, false);//刻钟圆点
		} else {
			ctx.fillStyle = '#405F9E';
			ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
		}
		ctx.fill();
	}

}
//时针
function drawHour(hour, minute) {
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = "#fff";
	var rad = 2 * Math.PI / 12 * hour;
	var mrad = 2 * Math.PI / 12 / 60 * minute;
	ctx.rotate(rad + mrad);
	ctx.lineWidth = 3;
	ctx.lineCap = 'round';
	ctx.moveTo(0, 10);
	ctx.lineTo(0, -r / 2);
	ctx.stroke();
	ctx.restore();
}
//分针
function drawMinute(minute) {
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = "#fff";
	var rad = 2 * Math.PI / 60 * minute;
	ctx.rotate(rad);
	ctx.lineWidth = 3;
	ctx.lineCap = 'round';
	ctx.moveTo(0, 10);
	ctx.lineTo(0, -r + 30);
	ctx.stroke();
	ctx.restore();
}
//秒针
function drawSecond(second) {
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = '#c14543';
	var rad = 2 * Math.PI / 60 * second;
	ctx.rotate(rad);
	ctx.moveTo(-2, 20);
	ctx.lineTo(2, 20);
	ctx.lineTo(1, -r + 18);
	ctx.lineTo(-1, -r + 18);
	ctx.fill();
	ctx.restore();
}

function drawDot() {
	ctx.beginPath();
	ctx.fillStyle = '#fff';
	ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
	ctx.fill();
}

function draw(i) {
	//console.log(i);
	ctx.clearRect(0, 0, width, height);
	// var now = new Date();
	// var hour = now.getHours();
	// var minute = now.getMinutes();
	// var second = now.getSeconds();

	// 时间设置
	var timezone = [8, 10, 9.5]; // 时区 ： 东区时区1~12 西区时区-1~-12
	var hour = dateFormat(" HH", getLocalTime(timezone[i]));
	var minute = dateFormat(" MM", getLocalTime(timezone[i]));
	var second = dateFormat("SS", getLocalTime(timezone[i]));
	//console.log(second );
	drawBackground();
	drawHour(hour, minute);
	drawMinute(minute);
	drawSecond(second);
	drawDot();
	ctx.restore();

}

//时间格式化
function getLocalTime(i) {
	if (typeof i !== "number") {
		return new Date();
	}
	var d = new Date();
	var len = d.getTime();
	var offset = d.getTimezoneOffset() * 60000;
	var utcTime = len + offset;
	return new Date(utcTime + 3600000 * i);
}

function dateFormat(fmt, date) {
	let ret;
	const opt = {
		"Y+": date.getFullYear().toString(), // 年
		"m+": (date.getMonth() + 1).toString(), // 月
		"d+": date.getDate().toString(), // 日
		"H+": date.getHours().toString(), // 时
		"M+": date.getMinutes().toString(), // 分
		"S+": date.getSeconds().toString() // 秒
		// 有其他格式化字符需求可以继续添加，必须转化成字符串
	};
	for (let k in opt) {
		ret = new RegExp("(" + k + ")").exec(fmt);
		if (ret) {
			fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
		};
	};
	return fmt;
}
